<template>
  <!-- 首页 -->
  <view class="box">
    <view class="box-t">
      <view @click="one" class="one">
        <image src="/static/1.png" mode=""></image>
        <text>
          单选练习
        </text>
      </view>
      <view @click="two" class="two">
        <image src="/static/2.png" mode=""></image>
        <text>
          多选练习
        </text>
      </view>
      <view @click="three" class="three">
        <image src="/static/3.png" mode=""></image>
        <text>
          判断练习
        </text>
      </view>
    </view>
    <view class="box-o">
      <view @click="four" class="">
        混合练习
      </view>
      
      <view @click="openBrowser('https://unicloud.dcloud.net.cn/pages/cloud-database/cloud-database?pageid=mp-5734045f-a2b7-4066-87fe-36d2825e0cc6')" class="">
        题库导入
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      one() {
        uni.navigateTo({
          url: "/pages/selectThree/selectThree"
        })
      },
      two() {
        uni.navigateTo({
          url: "/pages/selectTwo/selectTwo"
        })
      },
      three() {
        uni.navigateTo({
          url: "/pages/judge/judge"
        })
      },
      four(){
        uni.navigateTo({
          url: "/pages/mix/mix"
        })
      },
      openBrowser(url){
        plus.runtime.openURL(url);
      }
    }
  }
</script>

<style scoped lang="scss">
  .box {
    .box-t {
      display: flex;
      flex-direction: row ;
      justify-content: space-around;
      view {
        width: 200rpx;
        height: 180rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #fff;
        border: 1rpx solid #eee;
        margin-top: 80rpx;
        border-radius: 15rpx;
        color: skyblue;
        box-shadow: #eee 6rpx 6rpx 6rpx;
        image{
          width: 50rpx;
          height: 50rpx;
          margin-top: -20rpx;
          }
          text{
            display: block;
            margin-top: 30rpx;
            font-size: 28rpx;
        }
      }
    }
 .box-o{
   display: flex;
   flex-direction: row ;
   justify-content: space-around;
   margin-top: 150rpx;
   view{
     width: 280rpx;
     height: 380rpx;
     background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     color: skyblue;
     border-radius: 15rpx;
     border: 1rpx solid #eee;
     box-shadow: #eee 6rpx 6rpx 6rpx;
   }
 }
  }
</style>